<template lang="">
    <div style="width:99%;margin:0 auto">
        <h2>单位列表</h2>
        <el-divider></el-divider>
        <el-form :inline="true" :model="serdate" class="demo-form-inline demo-form-inline-left">
  <el-form-item label="单位编号">
    <el-input v-model="serdate.unitCode" placeholder="单位编号"></el-input>
  </el-form-item>
  <el-form-item label="单位名称">
    <el-input v-model="serdate.unitName" placeholder="单位名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  @click="GetUnitdata" icon="el-icon-search">查询</el-button>
     <el-button type="primary"  @click="reseted" class="el-icon-refresh-right">重置</el-button>
    <el-button type="success" @click="Add">添加</el-button>
 <el-button type="danger" @click="getdels">批量删除</el-button>
 <el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i class="el-icon-upload el-icon--right"></i></el-button>
  </el-form-item>
</el-form>
     <template>
  <el-table
    :data="getUnitList"
    border
    style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="单位序号"
      >
    </el-table-column>
    <el-table-column
      prop="unitCode"
      label="单位编号"
    >
    </el-table-column>
    <el-table-column
      prop="unitName"
      label="单位名称"
    >
    </el-table-column>
     <el-table-column
      prop="remarks"
      label="备注">
    </el-table-column>
    <el-table-column
      label="操作列" width="200px">
      <template slot-scope="scope" >
        <el-link type="warning" @click="Update(scope.row.id)">编辑</el-link>
         <el-link type="danger" @click="deleteunit(scope.row.id)"> 删除</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>
<!-- 分页 -->
<el-form :inline="true" :model="formInline" class="btu">
  <el-form-item >
    共{{page.totalCount}}条,共{{page.pageCount}}页,当前{{page.page}}/{{page.page.pageCount}}页,每页显示{{page.size}}条
    </el-form-item>
    <el-form-item >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[2, 10, 15, 20]"
      :page-size="page.size"
      layout="sizes,slot, prev, pager, next"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(1)" :disabled="page.page==1">首页</button>
    </el-pagination>
    </el-form-item>
    <el-form-item >
        <el-pagination
      layout="slot, jumper"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(page.pageCount)" :disabled="page.page==page.pageCount">尾页</button>
    </el-pagination>
    
    </el-form-item>
</el-form>
 
    </div>
</template>
<script>
import { GetUnits, DelUnit, DeletesUnit } from "@/api/BasicsDatumServer/unitServer";
import XLSX from 'xlsx';
export default {
    //数据
    data() {
        return {
            formInline: {},
            serdate: {
                unitCode: "",
                unitName: "",
            },
            page: {
                page: 1,
                size: 2,
                totalCount: 0,
                pageCount: 0,
            },
            getUnitList: [],
            //多选列表
            multipleSelection: [],
        }
    },
    //计算属性
    computed: {
        sid() {
            var sid = [];
            this.multipleSelection.forEach((item) => {
                sid.push(item.id);
            })
            return sid;
        },
    },
    //方法
    methods: {

        //重置
        reseted() {
            this.serdate.unitCode = "";
            this.serdate.unitName = "";
            this.GetUnitdata();
        },
        //上一页
        handleCurrentChange(val) {
            this.page.page = val;
            this.GetUnitdata();
        },
        //下一页
        handleSizeChange(val) {
            this.page.size = val;
            this.GetUnitdata();
        },
        //编辑
        Update(id) {
            this.$router.push("/BasicsDatumServer/unitMangement/UnitUpd?id=" + id);
        },
        //添加
        Add() {
            this.$router.push("/BasicsDatumServer/unitMangement/UnitAdd");
        },
        //导出
        exportListToExcel(dataList) {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择要导出的数据',
                    type: 'warning'
                });
                return;
            }
            // 过滤需要导出的字段
            const filteredData = dataList.map(item => {
                return {
                    编号: item.id,
                    单位编号: item.unitCode,
                    单位名称: item.unitName,
                    备注: item.remarks,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件   
            XLSX.writeFile(workbook, '单位列表.xlsx');
        },
        //批量删除方法
        getdels() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                });
                return
            }
            var myparams = {
                delId: this.sid.toString(),
            }
            console.log(myparams);
            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeletesUnit(myparams).then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.page.page = 1;
                        this.GetUnitdata();
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "success",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //单位删除
        deleteunit(id) {
            var myparams = {
                id: id,
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DelUnit(myparams).then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.page.page = 1;
                        this.GetUnitdata();
                    } else {
                        this.$message({
                            message: "删除失败",
                            type: "success",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //多选列表获取
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //单位列表
        GetUnitdata() {
            var myparams = {
                unitCode: this.serdate.unitCode,
                unitName: this.serdate.unitName,
                page: this.page.page,
                size: this.page.size,
            }
            GetUnits(myparams).then((res) => {
                this.getUnitList = res.data.data;
                this.page.totalCount = res.data.totalCount;
                this.page.pageCount = res.data.pageCount;
            })
        },
    },
    //挂载
    mounted() {
        this.GetUnitdata();
        console.log(sessionStorage.getItem("encode"));
    },
}
</script>
<style lang="">
.btu{
   margin-top: 100px;
}
    .demo-form-inline-left {
  text-align: left;
}
</style>